<template>
    <div class="wrapper">
        <!--日程主题title-->
        <div class="field">
            <div class="field_title">
                <img :src="record_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">日程主题</div>
            </div>
            <div class="field_input" style="padding-left: 7px;font-size: 14px;">
                <input v-model="scheduleObject.title">
            </div>
        </div>
        <!--拜访对象title-->
        <div class="field">
            <div class="field_title">
                <img :src="people_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">拜访对象</div>
            </div>
            <div class="field_input">
                <Cell is-link :title="contactSelectStr" @click="showContact"/>
            </div>
        </div>
        <!--日程类型title-->
        <div class="field">
            <div class="field_title">
                <img :src="flag_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">日程类型</div>
            </div>
            <div class="field_input">
                <Cell is-link
                      :title="callTypeStr" @click="callTypeShow=true"/>
            </div>
        </div>
        <!--日程地址title-->
        <div class="field">
            <div class="field_title">
                <img :src="location_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">日程地址</div>
            </div>
            <div class="field_input" style=" padding-left: 7px;font-size: 14px;">
                <input v-model="scheduleObject.callAddress">
            </div>
        </div>
        <!--日程时间title-->
        <div class="field">
            <div class="field_title">
                <img :src="time_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">日程时间</div>
            </div>
            <div class="field_input">
                <Cell is-link :title="scheduleObject.time" @click="showDatetimePicker"/>
            </div>
        </div>
        <!--使用材料title-->
        <div class="field">
            <div class="field_title">
                <img :src="copy_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">使用材料</div>
            </div>
            <div class="field_input">
                <Cell is-link :title="materialSelect.name||' '" @click="showMaterial"/>
            </div>
        </div>
        <!--备注title-->
        <div class="field">
            <div class="field_title">
                <img :src="remark_icon" class="title_img"/>
                <div class="title_text" style="margin-left: 0;">备注</div>
            </div>
            <div class="field_input" style="padding-left: 7px;font-size: 14px;">
                <input v-model="scheduleObject.remark">
            </div>
        </div>

        <!--提交-->
        <div class="submit">
            <div class="submit_btn" @click="submit">
                提交
            </div>
        </div>

        <!--时间picker-->
        <Popup v-model="dateShow" position="bottom">
            <DatetimePicker type="datetime" v-model="currentDate" :formatter="formatter" @confirm="datetimeConfirm"
                            @cancel="dateShow=false"/>
        </Popup>


        <!--材料picker-->
        <Popup v-model="materialShow" style="height: 100vh;width: 100vw;z-index:2009" close-on-popstate
               :lazy-render="false" lock-scroll>
            <snfMaterialRadio @confirm="materialConfirm" @cancel="materialShow=false"/>

        </Popup>
        <Popup v-model="contactShow" style="height: 100vh;width: 100vw;" close-on-popstate
               :lazy-render="false">
            <snfContactRadio @hide="hideContact" @save="contactSelectConfirm"/>
        </Popup>

        <Popup v-model="callTypeShow" position="bottom">
            <Picker show-toolbar :columns="columns" @confirm="callTypeConfirm" @cancel="callTypeShow=false"/>
        </Popup>
    </div>
</template>

<script>
    import record_icon from '@assets/image/record_icon.svg'
    import people_icon from '@assets/image/people_icon.svg'
    import flag_icon from '@assets/image/flag_icon.svg'
    import location_icon from '@assets/image/location_icon.svg'
    import time_icon from '@assets/image/time_icon.svg'
    import copy_icon from '@assets/image/copy_icon.svg'
    import remark_icon from '@assets/image/remark_icon.svg'
    import {dateFormat} from '@util/date'
    import snfMaterialRadio from '@components/snfMaterialRadio'
    import snfContactRadio from '@components/snfContactRadio'
    import {
        scheduleDetailCreate,
        scheduleDimensionTypeQuery,
        scheduleDimensionDoctorQuery
    } from '@api/schedule'

    import {
        getDoctorlist,
        getContentData
    } from '@api/ihub'


    import {
        Button,
        Uploader,
        Cell,
        Popup,
        DatetimePicker,
        Picker
    } from 'vant'

    export default {
        name: "schedule_add",
        components: {
            Button,
            Uploader,
            Cell,
            Popup,
            DatetimePicker,
            Picker,
            snfMaterialRadio,
            snfContactRadio
        },
        data() {
            return {
                columns: [],
                callList: [],
                doctors: [],
                scheduleObject: {
                    callAddress: '',
                    title: '',
                    callType: '',
                    callSubType: '',
                    contact: '',
                    contactId: '',
                    time: '',
                    remark: '',
                    status: '未完成',
                    empEmail: sessionStorage.getItem('email')
                },
                record_icon: record_icon,
                people_icon: people_icon,
                flag_icon: flag_icon,
                location_icon: location_icon,
                time_icon: time_icon,
                copy_icon: copy_icon,
                remark_icon: remark_icon,
                dateShow: false,
                currentDate: new Date(),
                currentDateStr: '',
                materialShow: false,
                materialList: [],
                materialStr: '',
                callTypeShow: false,
                callTypeStr: '',
                contactList: [],
                contactSelect: [],
                materialIdx: -2,
                contactSelectIdx: -2,
                contactSelectStr: '',
                contactShow: false,
                callTypeSubList: [],
                callTypes: [],
                submiting: false,
                contactSaveTmp: {},
                materialSelect: {}

            }
        },
        created() {
        },
        methods: {
            hideContact() {
                this.contactShow = false
            },
            getBuData() {
                scheduleDimensionTypeQuery().then(res => {
                    if (res.successful) {
                        let result = res.data
                        //组装callType数据
                        Object.keys(result).map((item, index) => {
                            this.callTypes.push(item)
                            this.callTypeSubList.push(result[item].map(item => {
                                return {name: item.callTypeName, id: item.callTypeId, callTypeId: item.parentTypeId}
                            }))
                            this.columns.push({
                                text: item,
                                children: result[item].map(item => {
                                    return {text: item.callTypeName}
                                })
                            })

                        })

                    } else {
                        alert(res.message)
                    }
                })
            },
            callTypeConfirm(value, index) {
                this.callTypeIdx = index
                console.log(value)
                this.callTypeStr = value.join('-')
                this.callTypeShow = false
            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                } else if (type === 'month') {
                    return `${value}月`
                } else if (type === 'day') {
                    return `${value}日`
                } else if (type === 'hour') {
                    return `${value}时`
                } else if (type === 'minute') {
                    return `${value}分`
                }
            },
            showDatetimePicker() {
                this.dateShow = true
            },
            contactSelectConfirm(contact) {
                this.contactShow = false
                this.contactSelectStr = contact.name
                this.scheduleObject.callAddress = contact.hosp + " " + contact.dept
                this.contactSaveTmp = contact
            },
            contactConfirm(value, index) {
                this.contactShow = false
                this.contactSelectStr = value.text
                this.contactSelectIdx = value.value
                this.scheduleObject.callAddress = this.contactList[index].hospital + " " + this.contactList[index].dept
            },
            datetimeConfirm(value) {
                this.dateShow = false
                this.scheduleObject.time = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(value))
            },
            showContact() {
                this.contactShow = true
            },
            showMaterial() {
                this.materialShow = true
            },
            materialConfirm(value) {
                this.materialSelect = value
                this.materialShow = false
            },
            scheduleDimensionDoctorQuery() {
                scheduleDimensionDoctorQuery().then(res => {
                    if (res.successful) {
                        this.contactList = res.data
                        this.contactSelect = res.data.map((item, index) => {
                            return {text: item.hcpName, value: index}
                        })
                    }
                })
            },
            submit() {
                if (this.submiting) {
                    return
                }
                try {
                    if (!this.scheduleObject.title) {
                        alert('请填写日程主题')
                        return
                    }

                    if (!this.scheduleObject.time) {
                        alert('请选择日程时间')
                        return
                    }

                    let param = this.scheduleObject
                    if (this.callTypeIdx) {
                        param.callTypeId = this.callTypeSubList[this.callTypeIdx[0]][this.callTypeIdx[1]].callTypeId
                        param.callType = this.callTypes[this.callTypeIdx[0]]
                        param.callSubTypeId = this.callTypeSubList[this.callTypeIdx[0]][this.callTypeIdx[1]].id
                        param.callSubType = this.callTypeSubList[this.callTypeIdx[0]][this.callTypeIdx[1]].name
                    } else {
                        alert('请选择日程类型')
                        return
                    }
                    // if (this.contactSelectIdx > -1) {
                    //     param.hcpUnionId = this.contactList[this.contactSelectIdx].unionid
                    //     param.contactId = this.contactList[this.contactSelectIdx].customerId
                    //     param.contact = this.contactList[this.contactSelectIdx].name
                    //     param.hospital = this.contactList[this.contactSelectIdx].hospital
                    //     param.category = this.contactList[this.contactSelectIdx].dept
                    // } else {
                    //     alert('请选择拜访对象')
                    //     return
                    // }
                    if (this.contactSaveTmp) {
                        param.hcpUnionId = this.contactSaveTmp.unionId
                        param.contactId = this.contactSaveTmp.id
                        param.contact = this.contactSaveTmp.name
                        param.hospital = this.contactSaveTmp.hosp
                        param.category = this.contactSaveTmp.dept
                    } else {
                        alert('请选择拜访对象')
                        return
                    }
                    if (this.materialSelect) {
                        param.callMaterialId = this.materialSelect.id
                        param.callMaterialName = this.materialSelect.name
                    } else {
                        alert('请选择使用材料')
                        return
                    }
                    this.submiting = true
                    //提交逻辑
                    scheduleDetailCreate(param).then(res => {
                        if (res.statusCode == 200) {
                            //跳转列表页
                            this.$emit('hidePopup')
                        } else {
                            alert(res.message)
                        }
                        this.submiting = false
                    })

                } catch (e) {
                    alert(e)
                }


            },
            getDoctors() {
                getDoctorlist().then(res => {
                    if (res.status == "1000") {
                        this.contactList = res.data.Array
                        this.contactSelect = this.contactList.map((item, index) => {
                            return {value: index, text: item.name}
                        })
                        this.testStr = JSON.stringify(this.contactSelect)
                    } else {
                        alert(res.data.rtnMsg)
                    }
                })
            },
            getMats() {
                getContentData().then(res => {
                    if (res.status == "1000") {
                        this.materials = res.data.Array
                        this.materialList = this.materials.map((item, index) => {
                            return {value: index, text: item.documentTitle}
                        })
                    } else {

                    }
                })
            },
        },

        mounted() {
            // this.getMats()
            // this.getDoctors()
            this.getBuData();
            // this.scheduleDimensionDoctorQuery()
        },
        beforeRouteLeave(to, from, next) {
            if (this.contactShow) {
                this.contactShow = false
                next(false)
            } else {
                next()
            }
        },
    }
</script>
<style scoped src="./index.css"/>

<style scoped>

</style>